$ex-list-bg: #F5F5F5;
$ex-list-active: #de2728;
$ex-list-shadow-color: #D7DAE5;
$ex-list-shadow-color2: #607D8B;
$ex-list-color: #333;
$ex-list-transition-duration: 300ms;
$ex-list-transition-timing-function: linear;
.ex-list-box{
    width: 100%;
    .ex-list-box__list{
        width: 100%;
        &::after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
        }
        ::v-deep{
            .ex-list-box__item{
                float: left;
                width: 2rem;
                height: 1.6rem;
                margin: .1rem .2rem;
                @include flexLayout(flex,center,normal);
                flex-flow: column-reverse;
                box-shadow: 0px .1rem .06rem $ex-list-shadow-color;
                transition-property: box-shadow;
                transition-duration: $ex-list-transition-duration;
                transition-timing-function: $ex-list-transition-timing-function;
                cursor: pointer;
                &:hover{
                    box-shadow: 0px .12rem .1rem rgba($ex-list-shadow-color2,1);
                }
            }
            .ex-list-box__item-label{
                flex: 0 0 auto;
                font-size: .14rem;
                color: $ex-list-color;
                background: linear-gradient(to right,rgba($ex-list-active, .3),rgba($ex-list-shadow-color, .6),rgba($ex-list-active, .3));
                padding: .1rem .2rem .1rem;
                text-align: center;
            }
            .ex-list-box__item-value{
                padding: .2rem .2rem 0;
                font-size: .14rem;
                line-height: 1.4;
                word-break: break-all;
                flex:  1;
                color: rgba($ex-list-color,.8);
            }
        }
    }
}
